<template>
  <div>
    <div class="input">
      <el-input v-model="data.readExp" placeholder="请输入" type="number">
        <template slot="prepend">阅读一篇文章经验：</template>
      </el-input>
    </div>
    <div class="input">
      <el-input v-model="data.hoursExp" placeholder="请输入" type="number">
        <template slot="prepend">在线一个小时经验：</template>
      </el-input>
    </div>
    <div class="input">
      <el-input v-model="data.experience" placeholder="请输入" type="number">
        <template slot="prepend">多少的经验才升级：</template>
      </el-input>
    </div>
    <div class="btn">
      <el-button type="primary" @click="submit">保存设置</el-button>
    </div>
  </div>
</template>

<script>
import { set, editSet } from '@/api/set'
export default {
  name: 'Settings',
  data() {
    return {
      data: {
        id: undefined,
        readExp: 0.0,
        hoursExp: 0.0,
        experience: 0.0
      }
    }
  },
  created() {
    this.getSet()
  },
  methods: {
    // getSet
    getSet() {
      set().then(res => {
        const { data } = res.data
        this.data = data
      }).catch(() => {})
    },
    // submit
    submit() {
      this.validation()
      const res = this.data
      editSet(res.id, res)
        .then(res => {
          const { msg } = res.data
          this.$message({
            type: 'success',
            message: msg
          })
        }).catch(() => {})
    },
    msg(msg) {
      this.$message({
        type: 'error',
        message: msg
      })
    },
    // 粗糙的验证
    validation() {
      const res = this.data
      if (+res.readExp === 0) {
        this.msg('不能等于0')
        return
      }

      if (!+res.readExp) {
        this.msg('不能等于空')
        return
      }

      if (+res.hoursExp === 0) {
        this.msg('不能等于0')
        return
      }

      if (!+res.hoursExp) {
        this.msg('不能等于空')
        return
      }

      if (+res.experience === 0) {
        this.msg('不能等于0')
        return
      }

      if (!+res.experience) {
        this.msg('不能等于空')
        return
      }
    }
  }
}
</script>

<style scoped>
  .input {
    margin-top: 20px;
    margin-left: 50px;
    width: 50%;
  }
  .btn {
    margin-left: 50px;
    margin-top: 50px;
  }
</style>
